<script setup lang="ts">
import { router } from '@/router';


const toHome = () => {
    router.push({
        name: 'CourseHome'
    });
}
</script>

<template>
    <div class="course-container">
        <div class="course">
            <p class="text">课程推荐</p>
            <div class="item" @click="toHome">
                <div class="image">
                    <van-image :src="'course-1.jpg'" fit="contain"/>
                </div>
                <div class="right">
                    <p class="title">数据库期末冲刺-3小时突击数据库</p>
                    <p class="author">梦阳老师</p>
                    <p class="content">数据库期末冲刺-3小时突击数据库。数据库系统概论/数据库系统教程/数据库系统基础教程/数据库原理及应用</p>
                </div>
            </div>
            <div class="item">
                <div class="image">
                    <van-image :src="'course-2.jpg'" fit="contain"/>
                </div>
                <div class="right">
                    <p class="title">数据库原理与应用</p>
                    <p class="author">杨丽丽</p>
                    <p class="content">在数字化时代，数据已成为驱动各领域发展的关键要素，而数据库作为数据管理的核心技术，其重要性不言而喻</p>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.course-container {
    display: flex;
    width: 100%;
    justify-content: center;
    .course {
        width: 88%;
        background-color: white;
        border-radius: 15px;
        padding: 3%;
        padding-top: 0%;
        .text {
            font-size: 16px;
            font-weight: bolder;
        }
        .item {
            display: flex;
            margin-bottom: 4%;
            .image {
                display: flex;
                width: 50%;
            }
            .right {
                width: 44%;
                padding-left: 3%;
            }
        }
    }
}

.title {
    margin-top: 0;
    margin-bottom: 0;
}
.author {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 13px;
}
.content {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 13px;
}
</style>